<include file="Public/header"/>
<include file="Public/menu"/>
<link rel="stylesheet" href="__PUBLIC__/admin/adminlte/plugins/datepicker/datepicker3.css">
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.min.js"></script>
<link rel="stylesheet" href="__PUBLIC__/admin/adminlte/plugins/select2/select2.min.css">
<link rel="stylesheet" href="/Public/plupload/css.css" type="text/css">
<style>
    .div-input{
        width: 90%;;
    }
    .property {
        margin-right: 15px;
        margin-left: 15px;
    }
</style>
<!-- 内容页 -->
<div class="content-wrapper">
    <!-- 面包屑 -->
    <section class="content-header">
        <h1>
            商品
            <small>管理</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{:U('manage/index/index')}"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">修改基础商品</li>
        </ol>
    </section>

    <!-- 内容 -->
    <section class="content">

        <div class="row">

            <div class="col-md-12">

                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active" id="base_goods"><a href="#">基本信息</a></li>
                        <li class="" id="info_goods"><a href="#">商品内容</a></li>
                        <li class="" id="property_goods"><a href="#">商品属性</a></li>
                        <li class="" id="row-property_goods"><a href="#">商品规格</a></li>
                        <li class="pull-right header">
                            <div class="btn-group pull-right" style="margin-right: 10px">
                                <a href="{:U('goods/index')}" class="btn btn-sm btn-default"><i
                                        class="fa fa-list"></i>&nbsp;返回列表</a>
                            </div>
                        </li>
                    </ul>

                    <!-- /.box-header -->
                    <!-- form start -->
                    <form action="{:U('goods/save')}" method="post" accept-charset="UTF-8" class="form-horizontal"
                          id="form"
                          pjax-container="">
                        <input type="hidden" value="{$goods_msg['goods_id']}" name="goods_id">
                        <div class="box-body">
                            <div class="form-group base_goods_event">
                                <label class="col-sm-2 control-label">商品分类</label>
                                <div class="col-sm-6">
                                    <div class="no-margin">
                                        <select class="form-control  select_option" name="cat_id">

                                            <?php foreach($parent_list as $p){ ?>
                                            <option value="<?php echo $p['cat_id']; ?>"
                                            <?php echo $goods_msg['cat_id'] == $p['cat_id'] ? 'selected' : ''; ?>
                                            ><?php echo $p['cat_name']; ?></option>
                                            <?php foreach($second_list as $s){ if ($s['parent_id'] == $p['cat_id']) { ?>
                                            <option value="<?php echo $s['cat_id']; ?>"
                                            <?php echo $goods_msg['cat_id'] == $s['cat_id'] ? 'selected' : ''; ?> >&nbsp;&nbsp;&nbsp;&nbsp;|--<?php echo $s['cat_name']; ?></option>
                                            <?php }}  ?>
                                            <?php } ?>

                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group base_goods_event">
                                <label class="col-sm-2 control-label">商品名称</label>
                                <div class="col-sm-6">
                                    <div class="no-margin">
                                        <input name="name" value="{$goods_msg['name']}" type="text" class="form-control"
                                               placeholder="商品名称">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group base_goods_event">
                                <label class="col-sm-2 control-label">商品副标题</label>
                                <div class="col-sm-6">
                                    <div class="no-margin">
                                        <input name="name2" value="{$goods_msg['name2']}" type="text"
                                               class="form-control"
                                               placeholder="商品副标题">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group base_goods_event">
                                <label class="col-sm-2 control-label">商品重量</label>
                                <div class="col-sm-6">
                                    <div class="no-margin">
                                        <input name="weight" value="{$goods_msg['weight']}" type="text"
                                               class="form-control"
                                               placeholder="商品重量">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group base_goods_event">
                                <label class="col-sm-2 control-label">商品单位</label>
                                <div class="col-sm-6">
                                    <div class="no-margin">
                                        <input name="unit" value="{$goods_msg['unit']}" type="text" class="form-control"
                                               placeholder="商品单位">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group base_goods_event">
                                <label class="col-sm-2 control-label">商品亮点</label>
                                <div class="col-sm-6">
                                    <div class="no-margin">
                                        <textarea name="highlight"
                                                  class="form-control">{$goods_msg['highlight']}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group base_goods_event">
                                <label class="col-sm-2 control-label">上传图片</label>
                                <div class="col-sm-6">
                                    <div class="no-margin">
                                        <button id="browse" type="button" class="btn btn-primary">
                                            <i class="fa fa-fw fa-plus"></i>
                                            选择上传文件
                                        </button>
                                    </div>
                                    <div id="container">
                                        <input type="hidden" name="input-num" class="input-num"/>
                                        <ul id="img-list">
                                            <?php
                                                for ($i = 0 ;$i<count($images); $i++) {
                                            ?>
                                            <li onclick="default_img(this)" class="item"
                                                id="file-o_<?php echo $images[$i]['images_id'];?>">
                                                <div class="pic-box">
                                                    <img class="img" src="<?php echo '/Uploads/' . $images[$i]['url'];?>">
                                                </div>
                                                <p class="img_name"><?php echo $images[$i]['url'];?></p>
                                                <p class="img-progress">100%</p>
                                                <input type="hidden" value="<?php echo $images[$i]['url'];?>" name="images[]">
                                                <a class="remove-btn glyphicon glyphicon-trash text-danger" href="javascript:void(0)" onclick="deleteImgItem(this)"></a>
                                                <?php
                                                       if ($images[$i]['image_id'] == $goods_msg['image_default_id']){
                                                   ?>
                                                <i class="glyphicon glyphicon-ok-sign text-success">默认图</i>
                                                <?php } ?>
                                            </li>
                                            <?php } ?>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group base_goods_event">
                                <label class="col-sm-2 control-label">添加时间</label>
                                <div class="col-sm-6">
                                    <div class="input-group date form_datetime"
                                         data-date="<?php echo date('Y-m-d H:i:s',$goods_msg['last_modify']);?>"
                                         data-date-format="yyyy-mm-dd hh:ii">
                                        <input class="form-control" type="text" name="" value="<?php echo date('Y-m-d H:i:s',$goods_msg['last_modify']);?>" readonly>
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                        <span class="input-group-addon"><span
                                                class="glyphicon glyphicon-th"></span></span>
                                    </div>
                                    <input type="hidden" name="last_modify"
                                           value="<?php echo date('Y-m-d H:i:s',$goods_msg['last_modify']);?>"/>
                                </div>
                            </div>

                            <div class="form-group info_goods_event" style="display: none;">
                                <label class="col-sm-2 control-label">商品内容</label>
                                <div class="col-sm-6">
                                    <textarea id="specialContent" name="content">{$goods_msg['intro']}</textarea>
                                </div>
                            </div>

                            <?php
                                $goods_property_keys = array_keys($goods_property);

                                $goods_property_values = array_values($goods_property);

                                for($j=0; $j < count($goods_property_keys); $j ++) {
                             ?>

                            <div class="form-group property_goods_event" style="display: none;">
                                <label class="col-sm-2 control-label">商品属性</label>
                                <div class="col-sm-6">
                                    <div class="input-group">
                                        <input type="text" name="keywords[]" value="<?php echo $goods_property_keys[$j];?>" class="form-control"
                                               placeholder="商品属性名称" style="width: 50%">
                                        <input type="text" name="values[]" value="<?php echo $goods_property_values[$j];?>" class="form-control"
                                               placeholder="商品属性值" style="width: 50%">
                                        <?php if ($j==0) {?>
                                        <span class="input-group-addon addkey"><i class="fa fa-fw fa-plus"></i></span>
                                        <?php }else{ ?>
                                        <span class="input-group-addon delkey"><i class="fa fa-fw fa-minus"></i></span>
                                        <?php } ?>
                                    </div>
                                </div>
                            </div>

                            <?php } ?>

                        </div>
                        <div class="row-property" style="display: none;position: relative; min-height: 40px; padding-top: 40px;">
                            <span class="add-property btn btn-sm btn-default" style="width: 43px;position: absolute; left: 61.3%; top: 0;"><i class="fa fa-fw fa-plus"></i></span>
                        <?php


                            for($k=0; $k < count($product); $k ++) {
                        ?>

                            <div class="row property">

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">规格描述</label>
                                    <div class="col-sm-6 input-group">
                                        <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                                        <input name="spec_info[]" value="{$product[$k]['spec_info']}" type="text" class="form-control"
                                               placeholder="规格描述 如：含量：230g、瓶/箱：1瓶">
                                        <input type="hidden" value="<?php echo $product[$k]['product_id'];?>" name="product_id[]" />

                                        <?php if ($k==0) {?>
                                        <span class="input-group-addon add-property"><i class="fa fa-fw fa-plus"></i></span>
                                        <?php } ?>
                                        <span class="input-group-addon"><a href="javascript:void(0)" onclick="del_product(this,<?php echo $product[$k]['product_id'];?>)" class="fa">删除</a></span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="control-label col-sm-2">
                                        <label class="control-label">门店市场价</label>
                                    </div>
                                    <div class="div-input">
                                        <div class="input-group">
                                            <input type="text" name="mktprice[]" value="{$product[$k]['mktprice']}" class="form-control"
                                                   placeholder="门店市场价">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="control-label col-sm-2">
                                        <label class="control-label">门店销售价</label>
                                    </div>
                                    <div class="div-input">
                                        <div class="input-group">
                                            <input type="text" name="price[]" value="{$product[$k]['price']}" class="form-control"
                                                   placeholder="门店销售价">
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <div class="control-label col-sm-2">
                                        <label class="control-label">门店库存</label>
                                    </div>
                                    <div class="div-input">
                                        <div class="input-group">
                                            <input type="text" name="store[]" value="{$product[$k]['store']}" class="form-control"
                                                   placeholder="门店库存">
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <div class="control-label col-sm-2">
                                        <label class="control-label">货号</label>
                                    </div>
                                    <div class="div-input">
                                        <div class="input-group">
                                            <input type="text" name="bn[]" value="{$product[$k]['bn']}" class="form-control"
                                                   placeholder="货号">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="control-label col-sm-2"><label class="control-label">商品条形码</label></div>
                                    <div class="div-input">
                                        <div class="input-group">
                                            <input type="text" name="barcode[]" value="{$product[$k]['barcode']}" class="form-control" placeholder="商品条形码">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="form-group 1">
                                        <label class="col-sm-2 control-label">仅全国送显示</label>
                                        <div class="col-sm-6">
                                            <div class="input-group">
                                                否 <input type="radio" name="is_qgs_show[{$product[$k]['product_id']}]" value="0" <?php echo $product[$k]['is_qgs_show'] == '0' ? 'checked=""' : '';?> >
                                                是 <input type="radio" name="is_qgs_show[{$product[$k]['product_id']}]" value="1" <?php echo $product[$k]['is_qgs_show'] == '1' ? 'checked=""' : '';?>>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>



                            <?php }  ?>
                        </div>

                        <!-- /.box-body -->
                        <div class="box-footer">
                            <div class="col-sm-2">

                            </div>
                            <div class="col-sm-6">

                                <div class="btn-group pull-right">
                                    <button type="submit" class="btn btn-info pull-right">提交</button>
                                </div>

                            </div>

                        </div>
                        <!-- /.box-footer -->
                    </form>
                </div>

            </div>
        </div>

    </section>
</div>
<!-- 底部 -->
<include file="Public/common_footer"/>
<link rel="stylesheet" href="/Public/admin/fileinput/fileinput.min.css">
<script src="/Public/admin/fileinput/fileinput.min.js"></script>
<script src="__PUBLIC__/admin/adminlte/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="__PUBLIC__/admin/adminlte/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>


<script data-exec-on-popstate>
    var ue = UE.getEditor('specialContent', {
        autoHeight: false,
        initialFrameHeight: 500,
    });
    ue.ready(function () {
        //设置编辑器的内容
        /*var content = "<?php echo $info['content'];?>";
         ue.setContent(content);*/
    });


    function checkform() {
        var content = ue.getContent();
        $('input[name=content]').val(content);

    }
    $('.form_datetime').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 0
    });
    //todo validate type
    $('#form').validate({
        ignore: "",
        rules: {
            name: {
                required: true
            },
            name2: {
                required: true
            },
            weight: {
                required: true
            },
            unit: {
                required: true
            }
        },
        messages: {
            name: {
                required: '必填',
            },
            name2: {
                required: '必填',
            },
            weight: {
                required: '必填',
            },
            unit: {
                required: '必填',
            }
        },
        submitHandler: function (form) {
            form.submit();
        }
    });

    $(function () {
        // 显示隐藏
        $('#base_goods').click(function () {
            $(this).addClass('active');
            $('#info_goods').removeClass('active');
            $('#property_goods').removeClass('active');
            $('#row-property_goods').removeClass('active');
            $('.base_goods_event').show();
            $('.info_goods_event').hide();
            $('.property_goods_event').hide();
            $('.row-property').hide();
        });
        $('#info_goods').click(function () {
            $(this).addClass('active');
            $('#base_goods').removeClass('active');
            $('#property_goods').removeClass('active');
            $('#row-property_goods').removeClass('active');
            $('.base_goods_event').hide();
            $('.info_goods_event').show();
            $('.property_goods_event').hide();
            $('.row-property').hide();
        });
        $('#property_goods').click(function () {
            $(this).addClass('active');
            $('#info_goods').removeClass('active');
            $('#base_goods').removeClass('active');
            $('#row-property_goods').removeClass('active');
            $('.base_goods_event').hide();
            $('.info_goods_event').hide();
            $('.property_goods_event').show();
            $('.row-property').hide();
        });
        $('#row-property_goods').click(function () {
            $(this).addClass('active');
            $('#info_goods').removeClass('active');
            $('#base_goods').removeClass('active');
            $('#property_goods').removeClass('active');
            $('.base_goods_event').hide();
            $('.info_goods_event').hide();
            $('.property_goods_event').hide();
            $('.row-property').show();
        });

        // 商品属性+
        $('.box-body').on('click', '.addkey', function () {
            var html = '';
            html += '<div class="form-group property_goods_event"><label class="col-sm-2 control-label"></label><div class="col-sm-6"><div class="input-group">';
            html += '<input type="text" name="keywords[]" value="" class="form-control" placeholder="商品属性名称" style="width: 50%"> <input type="text" name="values[]" value="" class="form-control" placeholder="商品属性值" style="width: 50%">';
            html += '<span class="input-group-addon delkey"><i class="fa fa-fw fa-minus"></i></span></div></div></div>';
            $('.box-body').append(html);
        });
        // 商品属性-
        $('.box-body').on('click', '.delkey', function () {
            $(this).parent().parent().parent('.form-group').remove();
        });

        /**
         *
         */
        var index = 0;
        $('.row-property').on('click', '.add-property', function () {
            index ++;
            var html = '';
            html += '<div class="row property">';
            html += '<div class="form-group">';
            html += '<label class="col-sm-2 control-label">规格描述</label>';
            html += '<div class="col-sm-6 input-group">';
            html += '<span class="input-group-addon"><i class="fa fa-pencil"></i></span>';
            html += '<input name="spec_info_qgs[]" value="" type="text" class="form-control" placeholder="规格描述">';
            html += '<span class="input-group-addon minus-property"><i class="fa fa-fw fa-minus"></i></span>';
            html += '</div>';
            html += '</div>';
            html += '<div class="form-group">';
            html += '<div class="control-label col-sm-2">';
            html += '<label class="control-label">门店市场价</label>';
            html += '</div>';
            html += '<div class="div-input">';
            html += '<div class="input-group">';
            html += '<input type="text" name="mktprice_qgs[]" value="" class="form-control" placeholder="门店市场价">';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '<div class="form-group">';
            html += '<div class="control-label col-sm-2">';
            html += '<label class="control-label">门店销售价</label>';
            html += '</div>';
            html += '<div class="div-input">';
            html += '<div class="input-group">';
            html += '<input type="text" name="price_qgs[]" value="" class="form-control" placeholder="门店销售价">';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '<div class="form-group">';
            html += '<div class="control-label col-sm-2">';
            html += '<label class="control-label">门店库存</label>';
            html += '</div>';
            html += '<div class="div-input">';
            html += '<div class="input-group">';
            html += '<input type="text" name="store_qgs[]" value="" class="form-control" placeholder="门店库存">';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '<div class="form-group">';
            html += '<div class="control-label col-sm-2">';
            html += '<label class="control-label">货号</label>';
            html += '</div>';
            html += '<div class="div-input">';
            html += '<div class="input-group">';
            html += '<input type="text" name="bn_qgs[]" value="" class="form-control" placeholder="货号">';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '<div class="form-group">';
            html += '<div class="control-label col-sm-2"><label class="control-label">商品条形码</label></div>';
            html += '<div class="div-input">';
            html += '<div class="input-group">';
            html += '<input type="text" name="barcode_qgs[]" value="" class="form-control" onblur="select_barcode(this)" placeholder="商品条形码">';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '<div class="form-group">';
            html += '<div class="form-group 1">';
            html += '<label class="col-sm-2 control-label">仅全国送显示</label>';
            html += '<div class="col-sm-6">';
            html += '<div class="input-group">';
            html += '否 <input type="radio" name="is_qgs_show_update['+index+']" value="0" checked="checked">';
            html += '是 <input type="radio" name="is_qgs_show_update['+index+']" value="1">';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';;
            html += '</div>';
            $('.row-property').append(html);
        });

        $('.row-property').on('click', '.minus-property', function () {
            $(this).parents('.property').remove();
        });
    });

    // 删除商品
    function del_product(self, v) {

        if (confirm('确定删除货品')) {

            $.get("/Manage/Goods/del_product/product_id/" + v,function(data,status){
                data = eval('(' + data + ')');

                if (data.status == 'false') {
                    alert('请先店铺下架该货品：' + data.store);
                }else {
                    $(self).parents('.property').remove();
                }

            });
        }
    }
</script>

<!--上传图片-->
<style>
    #container #img-list .item i {
        position: absolute;
        top: 4px;
        font-size: 26px;
        font-weight: bold;
    }
</style>

<!--上传图片-->
<script src="/Public/plupload/js/plupload.full.min.js"></script>
<script>

    // 删除li元素 之前，先判断当前是否是默认图片，如果是就将第一个li元素设置为默认图片
    function deleteImgItem(img) {
        var self_li = $(img).parents("li");

        var input_num_val = $('#container .input-num').val();

        self_li.parents('#img-list').children('li').each(function () {
            var index = $("#img-list li").index(this);

            if (self_li[0] === this) {  // 判断当前li是不是跟ul下面的li相等
                if (input_num_val == index) {
                    $('#container .input-num').val('0');

                    // 设置默认图片
                    var html = "<i class='glyphicon glyphicon-ok-sign text-success'>默认图</i>";
                    $('#img-list').children('li').eq(0).append(html); // 添加 默认图html
                }
            }

        });
        self_li.remove(); // 删除li元素

        $("#img-list li").each(function () {

            if ($(this).children('i').length > 0) {
                $('#container .input-num').val($("#img-list li").index(this));
            }
        });

    }

    // 给点击当前li元素设置默认图片，并且添加input框第几个元素
    function default_img(self) {
        var self = self;
        $(self).parents('#img-list').children('li').each(function () {
            $(this).children('i').remove();
            if (self === this) {  // 判断当前li是不是跟ul下面的li相等
                var index = $("#img-list li").index(this);
                $('#container .input-num').val(index); // 添加几个的图片，用于上传后台判断

                var html = "<i class='glyphicon glyphicon-ok-sign text-success'>默认图</i>";
                $(self).append(html); // 添加 默认图html
            }
        });

    }
    //    function imgAddId() {
    //        if ($("#container > ul > li").length > 0) {
    //            $("#container > ul").attr("id", "img-list");
    //        }else {
    //            $("#container > ul").attr("id", "");
    //        }
    //    }

    $(function () {

        //实例化对象
        var uploader = new plupload.Uploader({
            browse_button: 'browse',//浏览按钮
            url: '/Manage/Upload/index',//请求的接口
            flash_swf_url: '/Public/plupload/js/Moxie.swf',
            silverlight_xap_url: '/Public/plupload/js/js/Moxie.xap',
        });
        //初始化
        uploader.init();
        //选中文件后，先加到列表中，绑定进度条到progress，再上传
        uploader.bind('FilesAdded', function (uploader, files) {
            //加到列表中
            for (var i = 0, len = files.length; i < len; i++) {
                var file_name = files[i].name; //文件名
                //构造html来更新UI
                var item = $("<li onclick='default_img(this)'>").addClass("item").attr("id", "file-" + files[i].id);

                var pic_box = $("<div>").addClass("pic-box").appendTo(item);
                var img = $("<img>").addClass('img').appendTo(pic_box);
                $("<p>").addClass('img_name').text(file_name).appendTo(item);
                var progress = $("<p>").addClass("img-progress").text("100%").appendTo(item);
                item.appendTo("#img-list");
            }
            //绑定进度条
            uploader.bind('UploadProgress', function (uploader, file) {
                $('#file-' + file.id + ' .progress').css('width', file.percent + '%');//控制进度条
            });
            //绑定单文件上传成功
            uploader.bind('FileUploaded', function (uploader, file, rsp) {

                $('#file-' + file.id + ' img').attr("src", '/Uploads/' +rsp.response);
                $("<input type='hidden'>").val(rsp.response).attr("name", "images[]").appendTo($('#file-' + file.id));
                $("<a>").addClass("remove-btn glyphicon glyphicon-trash text-danger").attr("href", "javascript:void(0)").attr("onclick", "deleteImgItem(this)").appendTo($('#file-' + file.id));

                // 设置默认图片
                $('#container .input-num').val('0');
                var html = "<i class='glyphicon glyphicon-ok-sign text-success'>默认图</i>";
                $('#img-list').children('li').eq(0).append(html); // 添加 默认图html
            })
            uploader.start();
        });
    });
    function select_barcode(barcode){
        var val = $(barcode).val();
        $.get("/Manage/Goods/select_barcode/barcode/" + val, function(result){
            if (result == 1) {
                alert("该["+ val +"]商品条形码已经存在！");
            }
        });
    }
</script>

